<template>
  <div class="searchVcontainer">
    <bcb_220>
      <div class="searchVcolumn">
        <div class="searchVSearchBtnC">
          <div class="searchVStrC" />
          <div class="searchVInputC">
            <input_a :placeholder="i18nt.searchView.str" />
          </div>
        </div>
        <div class="searchVSwitchContainer"><btn_switch_a /></div>
      </div>
    </bcb_220>
  </div>
</template>

<script setup lang="ts">
import input_a from "@/components/inputs/input_a.vue";
import { i18nt } from "@/i18n";
import btn_switch_a from "@/components/buttons/btn_switch_a.vue";
</script>

<style scoped lang="scss">
.searchVcontainer {
  @include relative_hw;
  background-image: url("@/assets/png/topega2.png");
  background-size: cover;
  background-position: center;
}

.searchVcolumn {
  @include relative_hw;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;

  .searchVSearchBtnC {
    @include relative_hw(59px, 100%);
    margin-bottom: 30px;
    flex-direction: row;
    .searchVStrC {
      @include rel_cen_hw(100%, 434px);
      background-image: url("@/assets/png/searchStr.png");
      background-size: cover;
      background-position: center;
    }
    .searchVInputC {
      @include rel_cen_hw(100%, auto);
      margin-left: auto;
    }
  }

  .searchVSwitchContainer {
    @include rel_cen_hw(50px, 100%);
  }
}
</style>
